<template>
  <el-card
    class="w-full h-full flex-auto flex flex-col justify-center md:w-2/3 lg:w-1/2 md:mx-auto"
  >
    <div class="container" v-if="step === 1">
      <el-upload
        action="#"
        :file-list="fileList"
        :auto-upload="false"
        accept=".jpg, .png"
        :show-file-list="false"
        list-type="picture"
        :limit="1"
        v-if="uploadShow"
      >
        <template #trigger>
          <el-button type="primary">上传文件</el-button>
        </template>
      </el-upload>
      <div class="container" v-else>
        <el-image
          :preview-src-list="[imageUrl]"
          :src="imageUrl"
          fit="contain"
          class="w-4/5"
        ></el-image>
        <div class="my-4 flex flex-row justify-end">
          <el-button @click="submitCancel">取消</el-button>
          <el-button @click="submitPic" type="primary">上传</el-button>
        </div>
        <div class="tips">请确认您拍的图片是否符合要求。</div>
      </div>
      <div class="tips text-center mt-8">
        <p>请上传你想校正的书本图片。</p>
        <p>注意，保证书本上的环境光亮程度一致，左中右缝线尽可能与平直。</p>
      </div>
    </div>
    <div class="container" v-else-if="step == 2">
      <ul class="flex flex-col md:flex-row w-5/6">
        <li
          class="md:w-1/2 md:mx-4"
          v-for="(item, index) in pagesList"
          :key="index"
        >
          <el-image
            :preview-src-list="pagesList"
            :initial-index="index"
            :src="item"
            fit="contain"
          ></el-image>
        </li>
      </ul>
      <div class="my-4 flex flex-row justify-end">
        <el-button @click="submitCancel">取消</el-button>
        <el-button @click="submitContinue" type="primary">继续</el-button>
      </div>
      <div class="tips text-center mt-8">
        <p>请检查分页识别结果是否符合您的期望（单击图片可放大查看）。</p>
        <p>若符合，点击继续进行下一步处理。</p>
      </div>
    </div>
    <div class="container" v-else-if="step == 3">
      <ul class="flex flex-col md:flex-row w-5/6">
        <li
          class="md:w-1/2 md:mx-4"
          v-for="(item, index) in resList"
          :key="index"
        >
          <el-image
            :preview-src-list="resList"
            :initial-index="index"
            :src="item"
            fit="contain"
          ></el-image>
        </li>
      </ul>
      <div class="my-4 flex flex-row justify-end">
        <el-button @click="submitCancel">取消</el-button>
        <el-button @click="submitCancel" type="primary">继续</el-button>
      </div>
      <div class="tips text-center mt-8">
        <p>请接收最终校正结果。</p>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
import { UploadUserFile } from "element-plus";
import { computed, defineComponent, reactive, ref } from "vue";
import { getResult, postCancel, postPicture } from "@/api";
import { useBase64 } from "@vueuse/core";

export default defineComponent({
  name: "App",
  setup() {
    const step = ref(1);
    const fileList = ref<UploadUserFile[]>([]);
    const pagesList = reactive<Array<string>>([]);
    const resList = reactive<Array<string>>([]);

    const uploadShow = computed(() => fileList.value.length !== 1);
    const imageUrl = computed(() => {
      if (fileList.value.length === 1)
        return window.URL.createObjectURL(fileList.value[0].raw as File);
      else return "";
    });

    const submitPic = async () => {
      let b64 = await useBase64(fileList.value[0].raw as File).execute();
      postPicture(b64).then((res) => {
        pagesList.length === 0;
        res.forEach((item) => pagesList.push(`data:image/jpeg;base64,${item}`));
        step.value += 1;
      });
    };

    const submitCancel = () => {
      postCancel().then(() => {
        fileList.value.length = 0;
        pagesList.length = 0;
        resList.length = 0;
        step.value = 1;
      });
    };

    const submitContinue = () => {
      getResult().then((res) => {
        resList.length === 0;
        res.forEach((item) => resList.push(`data:image/jpeg;base64,${item}`));
        step.value += 1;
      });
    };

    return {
      fileList,
      uploadShow,
      imageUrl,
      step,
      pagesList,
      resList,
      submitPic,
      submitCancel,
      submitContinue,
    };
  },
});
</script>

<style lang="scss">
html,
body {
  box-sizing: border-box;
  height: 100%;
}

#app {
  @apply md:py-4 flex flex-col min-h-full;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: rgb(245, 245, 245);
  --primary-text: #303133;
  --regular-text: #606266;
  --secondary-text: #909399;
}

.container {
  @apply flex flex-col items-center justify-evenly;

  .tips {
    font-size: 10px;
    color: var(--secondary-text);
  }
}
</style>
